<template>
<div class="fly-header layui-bg-black">
  <div class="layui-container">
    <a class="fly-logo" href="/">
      <img :src="require('@/assets/img/logo.png')" alt="layui">
    </a>
    <ul class="layui-nav fly-nav layui-hide-xs">
      <li class="layui-nav-item">
        <a href="/"><i class="iconfont icon-jiaoliu"></i>交流</a>
      </li>
      <li class="layui-nav-item">
        <a href="/case/2017/"><i class="iconfont icon-iconmingxinganli"></i>案例</a>
      </li>
      <li class="layui-nav-item">
        <a href="/"><i class="iconfont icon-ui"></i>框架</a>
      </li>
    </ul>
    <ul class="layui-nav fly-nav-user">
      <template v-if="isLogin">
        <li class="layui-nav-item" @mouseover="show" @mouseout="hide">
          <a class="fly-nav-avatar" href="javascript:void(0)">
            <cite class="layui-hide-xs">{{userInfo.name}}</cite>
<!--            <i v-if="userInfo.approve" class="iconfont icon-renzheng layui-hide-xs" :title="`认证信息${user.approve}`"></i>-->
            <i v-if="userInfo.isVip" class="layui-badge fly-badge-vip layui-hide-xs">VIP{{ userInfo.isVip }}</i>
            <img :src="userInfo.pic" />
          </a>
          <dl class="layui-nav-child layui-anim layui-anim-upbit" :class="{'layui-show': isHover}">
            <dd><a href="/user/set/"><i class="layui-icon">&#xe620;</i>基本设置</a></dd>
            <dd><a href="/user/message/"><i class="iconfont icon-tongzhi" style="top: 4px;"></i>我的消息</a></dd>
            <dd><router-link to="/center"><i class="layui-icon" style="margin-left: 2px; font-size: 22px;">&#xe68e;</i>我的主页</router-link></dd>
            <hr style="margin: 5px 0;">
            <dd><a href="javascript:void(0);" style="text-align: center;" @click="logoutHandle">退出</a></dd>
          </dl>
        </li>
      </template>
      <template v-else>
        <li class="layui-nav-item">
          <a class="iconfont icon-touxiang layui-hide-xs" href="/user/login/"></a>
        </li>
        <li class="layui-nav-item">
          <router-link to="/login">登入</router-link>
        </li>
        <li class="layui-nav-item">
          <router-link to="/register">注册</router-link>
        </li>
        <li class="layui-nav-item layui-hide-xs">
          <a href="/app/qq/" onclick="layer.msg('正在通过QQ登入', {icon:16, shade: 0.1, time:0})" title="QQ登入" class="iconfont icon-qq"></a>
        </li>
        <li class="layui-nav-item layui-hide-xs">
          <a href="/app/weibo/" onclick="layer.msg('正在通过微博登入', {icon:16, shade: 0.1, time:0})" title="微博登入" class="iconfont icon-weibo"></a>
        </li>
      </template>
    </ul>
  </div>
</div>

</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  data () {
    return {
      isHover: false,
      hoverCtr: ''
    }
  },
  computed: {
    ...mapState(['isLogin', 'userInfo'])
  },
  methods: {
    ...mapMutations({
      logout: 'logout'
    }),
    show () {
      clearTimeout(this.hoverCtr)
      this.hoverCtr = setTimeout(() => {
        this.isHover = true
      }, 200)
    },
    hide () {
      clearTimeout(this.hoverCtr)
      this.hoverCtr = setTimeout(() => {
        this.isHover = false
      }, 500)
    },
    logoutHandle () {
      this.$confirm('确定退出吗？', () => {
        this.logout()
        this.$router.push('/')
      })
    }
  }
}
</script>

<style>
.layui-nav-child.layui-show {
  display: block;
}
</style>
